// 变量定义

$secondary-color: #333;
$primary-color: #ff0000;
$light-gray: #eff2f5;
$padding: 10px;
$transition-duration: 0.3s;
$secondary-color-light: #5c5c5c;
$primary-color-dark: #cc0000;

// 菜单项基础样式
.menu-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.menu-item {
  display: flex;
  padding-bottom: 10px;

  .image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 10px;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      font-size: var(font-size-large);
      color: $secondary-color;
    }

    .description {
      // 使用新的颜色变量替换lighten函数调用
      color: $secondary-color-light;
    }

    .price {
      color: #ff0000;

      i {
        font-size: var(font-size-small);
      }
    }
  }

  .delivery-fee {
    margin-top: 5px;
    color: $secondary-color-light;
  }
}

.flavor-list {
  margin-top: 10px;
  display: flex;

  .flavor-item {
    height: 30px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: $light-gray;
    margin-right: 5px;
  }
}

.select {
  border: 1px solid $primary-color;
  color: $primary-color;
}

// 口味底部区域
.flavor-bottom {
  padding: $padding;
  background: $light-gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: var(--font-size-medium);
}
.disable-btn {
  padding: 5px;
  font-size: var(font-size-small);
  opacity: 0.2;
  cursor: not-allowed;
  background-color: #333;
  border-radius: var(--border-radius);
  color: white;
  transition: background-color $transition-duration ease;
}
